<template>
  <div class="container">
    <div class="ui-title">基础用法</div>
    <cell-group :radius="10" width="95%">
      <cell title="提示弹窗" link @click="showPopup('default')" />
      <cell title="确认弹窗" link @click="showPopup('confirm')" />
    </cell-group>

    <v-dialog
      v-model="show"
      title="标题"
      :hideLeftBtn="hideLeftBtn"
      content="代码是写出来给人看的，附带能在机器上运行"
    ></v-dialog>
  </div>
</template>

<script>
import CellGroup from "../../components/cell-group";
import Cell from "../../components/cell";
import VDialog from "../../components/dialog";
export default {
  components: {
    CellGroup,
    Cell,
    VDialog,
  },
  data() {
    return {
      show: false,
      hideLeftBtn: true
    };
  },
  methods: {
    showPopup(type) {
      this.show = !this.show;

      switch(type) {
        case 'default':
          this.hideLeftBtn = true;
          break;
        case 'confirm':
          this.hideLeftBtn = false;
          break;
      }
    },
  },
};
</script>


<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #f7f8fa;
  overflow: hidden;
}
</style>